var Global =
{
	Counter: {},
	CurrentSelected: null
}

function loadPage()
{
	// Create workspace
	var workspace = new MyCanvas('workspace', 650, 500);
	var ribbon = new MyCanvas('ribbon', 800, 100);
	var toolbox = new MyCanvas('toolbox', 140, 500);
	var grid = new PropertyGrid('grid');
	
	// Create object for manage the slides
	var slideManager = new SlideManager(workspace);
	
	// Dummy data
	/*
		- counter: bien quan li dung de tao ra unique id cho cac control
		- controls: bien dummy de gia lap ket qua doc xml
	*/
	var controls = 
		[
			{type: "UILabel", id: "label", text: "Label"}
		];
	var handlers = 
		[
			createLabelHandler
		];
	
	//var x = []; x.push(obj),x.splice(index, 1); x[0]
	
	uiControls = new Array();
	// Add buttons to toolbox
	for(var i = 0; i < controls.length; i++)
	{
		// get button info
		var btnTypeId = controls[i].id;
		var btnId = "toolbox-" + btnTypeId;
		var btnText = "Create " + controls[i].text;

		// create and set position
		var btn = new UIButton(btnId, {draggable: false, resizable: false});
		btn.SetProperty("Text", btnText);
		btn.SetProperty("Size", {width: 120, height: 25});
		btn.SetProperty("Position", {x: 10, y: 10 + 35 * i});

		// add event for button
		btn.AddEventHandler("mouseenter", 0, playAnimation);
		btn.AddEventHandler("mouseleave", 0, playAnimation2);
		// add to toolbox
		toolbox.AddControl(btn);
		
		uiControls.push(btn);
		btn.GetNode().setX(btn.GetNode().getX() + btn.GetNode().getWidth()/2);
		btn.GetNode().setY(btn.GetNode().getY() + btn.GetNode().getHeight()/2);
		btn.GetNode().setOffset(btn.GetNode().getWidth()/2, btn.GetNode().getHeight()/2);
	}
	
	function playAnimation(){
		var animation = new AnimationWrapper({
			node: uiControls[0].GetNode(),
			duration: 500,
			delay: 0,
			loop: false
			});
		animation.createAnimation("ZoomIn", {layer: toolbox.layer, scaleX: 0.5, scaleY: 0.5})
		animation.start();
		}

	function playAnimation2(){
		var animation = new AnimationWrapper({
			node: uiControls[0].GetNode(),
			duration: 500,
			delay: 0,
			loop: false
			});
		animation.createAnimation("ZoomOut", {layer: toolbox.layer, scaleX: 1, scaleY: 1})
		animation.start();
		}

	function onControlClick(that, evt)
	{
		var props = that.GetProperties();
		var source = [];

		for(var key in props)
		{
			var value = (props[key] === undefined ? "" : JSON.stringify(props[key]));
			source.push({name: key, value: value});
		}

		grid.SetSource(source);
	}

	function createLabelHandler()
	{
		var controlType = "label";
		if(Global.Counter[controlType] === undefined)
			Global.Counter[controlType] = 0;

		var controlId = controlType + Global.Counter[controlType]++;
		var obj = new UILabel(controlId, {draggable: true, resizable: true});
		obj.SetProperty("Position", {x: 10, y: 10});
		obj.AddEventHandler("click", 0, onControlClick);
		
		slideManager.addContentToSlide(obj);
		//workspace.AddControl(obj);
	}

	function createImageHandler()
	{
		var controlType = "image";
		if(Global.Counter[controlType] === undefined)
			Global.Counter[controlType] = 0;

		var controlId = controlType + Global.Counter[controlType]++;
		var obj = new UIImage(controlId, {draggable: true, resizable: true});
		obj.SetProperty("Position", {x: 10, y: 10});
		obj.AddEventHandler("click", 0, onControlClick);
		
		slideManager.addContentToSlide(obj);
		//workspace.AddControl(obj);
	}
	
	function createSlideHandler()
	{
		var controlType = "slide";
		if(Global.Counter[controlType] === undefined)
			Global.Counter[controlType] = 0;

		var controlId = controlType + Global.Counter[controlType]++;
		var obj = new UISlide(controlId, {draggable: false, resizable: false});
		obj.SetProperty("Position", {x: 0, y: 0});
		obj.SetProperty("Size", {width: 650, height: 500});
		
		obj.AddEventHandler("click", 0, onControlClick);
		
		slideManager.addSlide(obj);
		//workspace.AddControl(obj);
	}

}


